<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="../ico/ai45v-vjnuj-001.ico">
    <!-- CSS only -->
    <link href="../css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="../js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">
        </script>
    <script src="../js/jquery-3.4.1.min.js"></script>
  <title>菜品详情</title>
</head>

<body>


  <!-- 导航栏 -->
  <nav class="navbar bg-light fixed-top bg-warning">
    <div class="container-fluid   bg-warning  fixed-top" style="height: 7%;">
      <a class="h3" href="../" style="text-decoration: none;color: black;">美食居</a>
      <button class="navbar-toggler" style="background-color: rgb(208, 171, 5);" type="button"
        data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
      <input type="" id="FoodID" style="display: none;" data-FoodID="">
      <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasDarkNavbar"
        aria-labelledby="offcanvasDarkNavbarLabel">
        <div class="offcanvas-header">
          <h4 class="offcanvas-title" id="offcanvasDarkNavbarLabel">导航</h4>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"
            aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
          <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
            <img src="../Head_p" alt="" style="width: 30%;border-radius: 1000px;">
            <li class="nav-item"><a id="login" class="nav-link" href="../">首页</a></li>

            <li class="nav-item">
              <a class="nav-link" href="#">关于我们</a>
            </li>
          </ul>
        </div data-position>
      </div>
    </div>
    </div>
    </div>
  </nav>


  <!-- 内容显示 -->
  <div class="row mb-2 " style="margin-top: 5%;">
    <div class="col-md-6">
      <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
        <div class="col-auto  d-lg-block">
          <img class="bd-placeholder-img" id="Food_img" width="200" height="250"
            src="../img/02bf2cb67dd03546f27849e713bf3951.jpeg" role="img" aria-label="Placeholder: 6"
            preserveAspectRatio="xMidYMid slice" focusable="false" />
        </div>
        <div class="col p-4 d-flex flex-column position-static" id="Food_data">
          <strong class="d-inline-block mb-5 text-primary h3">菜名：</strong>
          <div class="mb-1 text-muted mb-3">发布时间：</div>
          <div class="mb-1 text-muted mb-3">收 藏 量：</div>
          <p style="height: 100%;" class=" mt-3"></p>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
        <div class="col p-4 d-flex flex-column position-static" id="User_data">
          <strong class="d-inline-block mb-5 text-primary h3">发布者：</strong>
          <div class="mb-1 text-muted mt-3 mb-3">发 布 数：</div>
          <div class="mb-1 text-muted mb-3">粉 丝 数：</div>
        </div>
        <div class="col-auto  d-lg-block">
          <img class="bd-placeholder-img" id="Portrait" width="200" height="250"
            src="../img/02bf2cb67dd03546f27849e713bf3951.jpeg" role="img" aria-label="Placeholder: 6"
            preserveAspectRatio="xMidYMid slice" focusable="false" />
        </div>
      </div>
    </div>
  </div>
  <!-- 做法 -->
  <div class=" nav justify-content-center" style="width: auto;">
    <div class="p-4 mb-3 bg-light rounded" style="width: 95%;">
      <h4 class="fst-italic">做法：</h4>
      <p class="mb-0" id="practice">
        空空如也~
      </p>
    </div>
  </div>
  <!-- 评论框 -->
  <div style="width: auto;border: 1px solid #dee2e6;">
    <div class=" nav justify-content-center mt-2" style="border: 1px solid #dee2e6;border-radius: 40px;">
      <div class="form-floating mt-3 mb-1" style="width: 80%;display: inline;">
        <textarea class="form-control" style="width: 80%;" placeholder="Leave a comment here" id="floatingTextarea2"
          style="height: 100px"></textarea>
        <label for="floatingTextarea2">留下你的评论吧~</label>
      </div>
      <button class="btn btn-primary  mt-3" id="publish" style="width: 5%;margin: 5% 0 1% 0;height: 20%;">发表</button>
    </div>

    <!-- 评论区 -->
    <div class="list-group list-group-flush border-bottom scrollarea border" id="comment">
      <a href="#" class="list-group-item list-group-item-action  py-3 lh-sm" aria-current="true">
        <div class="d-flex w-100 align-items-center justify-content-between py-3">
          <strong class="mb-1 h5">小美</strong>
          <small>现在</small>
        </div>
        <div class="col-10 mb-1 small">快来留下你的第一条评论吧</div>
      </a>

    </div>
    <script src="../js/details.js"></script>

  </div>


</body>

</html>